<template>
  <div class="slider-banner product-bg">
    <swiper
      class="swiper-wrapper"
      :options="ProductConSwiper"
      v-if="imgUrls.length > 0"
    >
      <swiperSlide
        class="swiper-slide"
        v-for="(item, index) in imgUrls"
        :key="item"
        ref="goodSwiper"
        :class="liveUrl && index == 0 ? 'live' : ''"
        @click="liveUrl && index == 0 ? go(liveUrl) : ''"
      >
        <!-- <video class="videoSlider" v-if="liveUrl && index == 0" :preload="isLoadVidio" width="100%" :muted="isSilence" loop :poster="livePoster" :show-play-btn="false" controls objectFit="cover" :src="liveUrl"></video> -->
        <img v-if="liveUrl && index == 0" :src="livePoster" @click="go(liveUrl)" />
        <img :src="item" class="slide-image" v-if="index!=0"  />
        <img :src="item" class="slide-image" v-if="index===0 && !liveUrl"  />
      </swiperSlide>
    </swiper>
    <div class="pages">{{ currents || 1 }}/{{ imgUrls.length || 1 }}</div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
export default {
  name: "ProductConSwiper",
  components: {
    swiper,
    swiperSlide
  },
  props: {
    imgUrls: {
      type: Array,
      default: () => []
    },
    liveUrl: {
      type: String,
      default: ''
    },
    livePoster: {
      type: String,
      default: ''
    }
  },
  data: function() {
    let that = this;
    return {
      currents: 1,
      ProductConSwiper: {
        autoplay: false,
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true,
        on: {
          slideChangeTransitionStart: function() {
            that.currents = this.realIndex + 1;
          }
        },
        isSilence: true,
        isLoadVideo: false
      }
    };
  },
  mounted: function() {
    
  },
  methods: {
    go(url) {
      window.location.href = url;
    }
  }
};
</script>
<style scoped>
  .videoSlider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .hide {
    opacity: 0;
  }

  .pages {
    background: rgb(180,180,180);
    border-radius: 6px;
    color: rgb(252,252,252);
  }

  .swiper-slide {
    position: relative;
  }

  .live::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url('../assets/images/zhenxing/common/play.svg') center/cover no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }
</style>
